<!-- Horizontal Form -->
 <div class="box box-info">
      <div class="box-header with-border">
        <h3 class="box-title">添加角色</h3>
      </div>
      <!-- /.box-header -->
      <!-- form start -->
      <form class="form-horizontal">
        <div class="box-body">
          <div class="form-group">
            <label for="nameId" class="col-sm-2 control-label">名称</label>

            <div class="col-sm-10">
              <input type="text" class="form-control" name="name" id="nameId" placeholder="名称">
            </div>
          </div>
          <div class="form-group">
            <label for="noteId" class="col-sm-2 control-label">描述</label>

            <div class="col-sm-10">
              <input type="text" class="form-control" name="note" id="noteId" placeholder="描述">
            </div>
          </div>
          <div class="form-group">
				<label class="col-sm-2 control-label">授权</label>
				<div class="col-sm-10">
						<ul id="menuTree" class="ztree"></ul>
				</div>
		  </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
          <button type="button" class="btn btn-default btn-cancel">Cancel</button>
          <button type="button" class="btn btn-info pull-right btn-save">Save</button>
        </div>
        <!-- /.box-footer -->
      </form>
    </div>
    <script type="text/javascript" src="bower_components/ztree/jquery.ztree.all.min.js"></script>
    <script type="text/javascript">
    var zTree; 
    var setting = {
   	data : {
   	    simpleData : {
   			enable : true, //使用简单数据模式
   			idKey : "id",  //节点数据中保存唯一标识的属性名称
   			pIdKey : "parentId",  //节点数据中保存其父节点唯一标识的属性名称
   			rootPId : null  //根节点id
   		}
   	},
   	check:{
   		enable:true,
   		nocheckInherit:true
   	}//此配置提供复选框操作(可查官方zTree)
    }

    $(function(){
        doLoadMenus();
        $(".box-footer")
            .on("click",".btn-save",doSaveOrUpdate)
            .on("click",".btn-cancel",doCancel)

    })
    function doInitEditFormData(rowData){
       $("#nameId").val(rowData.name);
       $("#noteId").val(rowData.note);
       let menuIds=rowData.menuIds;
       menuIds.forEach(menuId=>{
           let node=zTree.getNodeByParam("id",menuId, null);
           zTree.checkNode(node,true,false);//这里的最后一个false表示勾选父节点时子节点不选中
       })
        zTree.expandAll(true);//展开树
    }
    //异步提交表单数据
    function doSaveOrUpdate(){
        debugger
        //1.获取表单数据
        let name=$("#nameId").val();
        let note=$("#noteId").val();
        let checkedNodes=zTree.getCheckedNodes();
        let checkedMenuIds=[];
        checkedNodes.forEach((node)=>{//=>为js中新的语法,可以取代function这个单词
            checkedMenuIds.push(node.id);//push方法用于向数组放数据
        })
        //2.构建参数对象
        let params={name:name,note:note,menuIds:checkedMenuIds.toString()};
        let rowData=$("#mainContentId").data("rowData");
        if(rowData)params.id=rowData.id;
        //3.定义请求url
        let insertUrl="/role/doSaveObject";
        let updateUrl="/role/doUpdateObject";
        let url=rowData?updateUrl:insertUrl;
        //4.发送异步请求,局部更细页面
        $.post(url,params,(result)=>{
            if(result.state==1){
                alert(result.message);
                doCancel();
            }else{
                alert(result.message);
            }
        })
    }
    function doCancel(){
        $("#mainContentId").load("/role/role_list");
        $("#mainContentId").removeData();
    }
    function doLoadMenus(){
        let url="/menu/doFindZtreeMenuNodes";
        $.getJSON(url,function(result){
            zTree=$.fn.zTree.init($("#menuTree"),setting,result.data);
            let rowData=$("#mainContentId").data("rowData");
            if(rowData){
                $(".box-title").html("修改角色");
                doInitEditFormData(rowData);
            }
        })
    }


</script>